<template>
    <div class="select-wrap">


        <el-popover
                placement="bottom"
                :width="200"
                trigger="click"
                popper-style="padding:0;"
        >
            <template #reference>
                <input class="select-ipt" type="text" placeholder="请选择" @click="handleOpen" @change="" @focus="handleOpen" v-model="tempValue" :readonly="$attrs.readonly" :disabled="$attrs.disabled">
            </template>


            <ul class="opts-wrap">
                <li class="opt-item" v-for="item in options">
                    {{item.label}}
                </li>
            </ul>
                <!--<el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                />-->
        </el-popover>
    </div>
</template>

<script setup>
    import {ref,defineProps,useAttrs, defineEmits} from 'vue';

    const props = defineProps(['options','value']),
      emit = defineEmits(['update:value'])
    let attrs = useAttrs();
    let selectRef = ref(null),
      options = ref([
        {value: 'hhh',label: 'name'},
        {value: 'hh',label: 'name1'},
        {value: 'h',label: 'name3'},
      ]);


    function handleSelect() {

    }
</script>

<style scoped lang="less">
.select-wrap{
    display: flex;
    flex-direction: column;
    height: 100%;
    .select-ipt{
        height: 100%;
    }

}
.opts-wrap{
    margin: 6px 0;
    .opt-item{
        font-size: 14px;
        padding: 0 32px 0 20px;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #606266;
        height: 34px;
        line-height: 34px;
        box-sizing: border-box;
        cursor: pointer;
        &:hover{
            background-color: #f5f7fa;
        }
        &.selected{
            background-color: #409eff;

        }
    }
}
</style>
